<template>
  <div class="main-con">
    <div class="header">
      <div class="title1">
        <img class="logo" src="@/assets/logo2.png" alt="" />
        <div>中健荟通</div>
      </div>
      <div class="first_menu">
        <div
          class="list"
          :class="[active === index ? 'active' : '']"
          @click="handleClick(index)"
          v-for="(item, index) in menu"
          :key="index"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="r">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-s-tools"></i>帮助中心
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">商家后台</el-dropdown-item>
            <el-dropdown-item command="2">商家首页</el-dropdown-item>
            <el-dropdown-item command="3">用户后台</el-dropdown-item>
            <el-dropdown-item command="4">用户首页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-popover placement="bottom" title="" width="100" trigger="click">
          <div class="hand_cs tuichu" @click="loginOut">退出</div>
          <div slot="reference">
            {{ username }}
            <i class="el-icon-caret-bottom"></i>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="con">
      <div class="left">
        <el-menu
          :default-active="pathActive"
          :unique-opened="true"
          class="el-menu-vertical-demo"
          active-text-color="#2978FF"
          router
        >
          <label v-for="item in navMenus" :key="item.id">
            <!-- 二级菜单 -->
            <el-submenu :index="item.title" v-if="item.children">
              <template slot="title">
                <i :class="item.icon"></i>
                <span> {{ item.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="v.route"
                  v-for="(v, i) in item.children"
                  :key="i"
                >
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{ v.title }}</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 一级菜单 -->
            <el-menu-item :index="item.route" v-else>
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </label>
        </el-menu>
      </div>
      <div class="right">
        <!-- <router-view :key="$route.fullPath" /> -->
        <Main></Main>
      </div>
    </div>
  </div>
</template>

<script>
import Main from "./main/main.vue";
import { getMenuData } from "@/api/index";
export default {
  components: { Main },
  data() {
    return {
      username: "",
      active: null,
      menu: [],
      menu1: [
        {
          id: "1",
          title: "首页",
          meta: { sign: "welcome" },
          children: [
            {
              id: "1-1",
              route: "/welcome",
              title: "首页",
              icon: "el-icon-user",
            },
          ],
        },
        {
          id: "2",
          title: "系统",
          meta: { sign: "system" },
          children: [
            {
              id: "2-2",
              title: "管理权限",
              icon: "el-icon-user",
              children: [
                {
                  route: "/system/manage/system_role", //菜单
                  title: "角色管理",
                },
                {
                  route: "/system/manage/managers_list", //系统管理员
                  title: "管理员列表",
                },
                {
                  route: "/system/manage/rules", //系统管理员
                  title: "权限规则",
                },
              ],
            },
          ],
        },
        {
          id: "3",
          title: "配置项",
          meta: { sign: "configure" },
          children: [
            {
              id: "3-6",
              title: "公告",
              icon: "el-icon-user",
              children: [
                {
                  id: "3-6-1",
                  icon: "el-icon-user",
                  route: "/configure/notice/index", //微信
                  title: "公告列表",
                },
              ],
            },
          ],
        },
        {
          id: "5",
          title: "商城管理",
          meta: { sign: "shopSystem" },
          children: [
            {
              id: "5-6",
              title: "酒店管理",
              icon: "el-icon-user",
              children: [
                { route: "/shopSystem/hotel/hotel_list", title: "酒店列表" },
                {
                  route: "/shopSystem/hotel/order_list",
                  title: "酒店订单",
                },
              ],
            },

            {
              id: "5-1",
              title: "商品列表",
              icon: "el-icon-user",
              children: [
                { route: "/shopSystem/allShop/shop_list", title: "商品列表" },
                {
                  route: "/shopSystem/allShop/shop_classification",
                  title: "商品分类",
                },
                {
                  route: "/shopSystem/allShop/shop_comment",
                  title: "商品评论",
                },
              ],
            },
            {
              id: "5-2",
              title: "积分商品",
              icon: "el-icon-user",
              children: [
                { route: "/shopSystem/scoreShop/shop_list", title: "商品列表" },
              ],
            },
            {
              id: "5-5",
              title: "订单管理",
              icon: "el-icon-user",
              children: [
                {
                  route: "/shopSystem/order/online_order",
                  title: "电商订单",
                },
                {
                  route: "/shopSystem/order/score_order",
                  title: "积分订单",
                },
              ],
            },
          ],
        },
        {
          id: "6",
          title: "营销",
          meta: { sign: "sale" },
          children: [
            {
              id: "6-6",
              title: "首页推荐",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/indexRecommend/index_list",
                  title: "推荐列表",
                },
                {
                  route: "/sale/indexRecommend/configure_list",
                  title: "标记配置列表",
                },
              ],
            },
            {
              id: "6-7",
              title: "首页配置",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/indexConfig/nav_config", //导航
                  title: "导航配置",
                },
                {
                  route: "/sale/indexConfig/find_goods", //发现好货
                  title: "发现好货",
                },
                {
                  route: "/sale/indexConfig/dapai", //大牌荟选
                  title: "大牌荟选",
                },
                {
                  route: "/sale/indexConfig/banner_list", //商品
                  title: "banner",
                },
                {
                  route: "/sale/indexConfig/activity", //活动
                  title: "活动",
                },
                {
                  route: "/sale/indexConfig/select", //商品
                  title: "精选新品",
                },
              ],
            },
            {
              id: "6-8",
              title: "电商推荐",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/onlineRecommend/index_list",
                  title: "推荐列表",
                },
                {
                  route: "/sale/onlineRecommend/banner",
                  title: "banner",
                },
                {
                  route: "/sale/onlineRecommend/config_list",
                  title: "标记配置列表",
                },
              ],
            },
            {
              id: "6-9",
              title: "赠送",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/hongbao/index",
                  title: "赠送记录",
                },
              ],
            },
          ],
        },
        {
          id: "7",
          title: "会员管理",
          meta: { sign: "member" },
          children: [
            {
              id: "7-1",
              title: "用户",
              icon: "el-icon-user",
              children: [
                {
                  id: "7-1-1",
                  title: "用户列表",
                  icon: "el-icon-user",
                  route: "/member/user/user_list",
                },
              ],
            },
          ],
        },
        {
          id: "8",
          title: "商户",
          meta: { sign: "merchant" },
          children: [
            {
              id: "8-1",
              title: "店铺管理",
              icon: "el-icon-user",

              children: [
                {
                  id: "8-1-1",
                  title: "店铺列表",
                  icon: "el-icon-user",
                  route: "/merchant/shopList/shop_list",
                },
              ],
            },
            {
              id: "8-2",
              title: "商家入驻",
              icon: "el-icon-user",

              children: [
                {
                  id: "8-2-1",
                  title: "入驻申请",
                  icon: "el-icon-user",
                  route: "/merchant/business/setting_in",
                },
                {
                  id: "8-2-2",
                  title: "待审核",
                  icon: "el-icon-user",
                  route: "/merchant/business/judge",
                },
              ],
            },
          ],
        },
        {
          id: "10",
          title: "财务中心",
          meta: { sign: "money" },
          children: [
            {
              id: "10-1",
              title: "提现",
              icon: "el-icon-user",
              children: [
                {
                  id: "10-1-1",
                  title: "待审核",
                  icon: "el-icon-user",
                  route: "/money/withdrawal/wait_for_judg",
                },
                {
                  id: "10-1-2",
                  title: "审核列表",
                  icon: "el-icon-user",
                  route: "/money/withdrawal/judg_list",
                },
              ],
            },
          ],
        },
      ],
      pathActive: "",
      navMenus: [],
    };
  },
  methods: {
    //获取菜单接口
    async getMenuData() {
      const { data, err } = await getMenuData({});
      if (err === 0) {
        data.forEach((item) => {
          item.route = "/" + item.route;
          if (item.children) {
            item.children.forEach((v) => {
              v.route = "/" + v.route;
              if (v.children) {
                v.children.forEach((m) => {
                  m.route = "/" + m.route;
                });
              }
            });
          }
        });
        // this.menu = this.menu1;
        this.menu = data;
        sessionStorage.setItem("menu", JSON.stringify(this.menu));
        //获取一级菜单激活  第一次为0
        let curActive = Number(sessionStorage.getItem("activeIndex")); //0
        this.handleClick(curActive);
      }
    },
    handleClick(index) {
      this.active = index;
      this.navMenus = [...this.menu[index].children];
    },
    //退出登录
    loginOut() {
      this.$confirm("是否确认退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        sessionStorage.clear();
        this.$router.replace({
          path: "/login",
        });
        location.reload();
      });
    },
    handleCommand(command) {
      if (command === "1") {
        window.open("https://help-mch.zgdjkpt.com/admin", "_blank");
      } else if (command === "2") {
        window.open("https://help-mch.zgdjkpt.com", "_blank");
      } else if (command === "3") {
        window.open("https://help.zgdjkpt.com/admin", "_blank");
      } else if (command === "4") {
        window.open("https://help.zgdjkpt.com", "_blank");
      }

      console.log(command);
    },
  },
  created() {
    this.getMenuData();
    this.username = sessionStorage.getItem("username");
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        this.pathActive = to.path;
        //监听路由改变存储当前激活一级菜单
        let pathString = window.location.pathname.split("/");
        this.menu = JSON.parse(sessionStorage.getItem("menu"));
        //第一次进入this.menu为null
        if (this.menu) {
          this.menu.forEach((item, index) => {
            if (item.meta.sign === pathString[1]) {
              //根据路由存储index
              sessionStorage.setItem("activeIndex", index);
            }
          });
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.breadcrum {
  font-size: 16px;
  margin-bottom: 13px;
}

.header {
  height: 60px;
  background-color: #001529;
  color: #fff;
  display: flex;
  justify-content: space-between;
  .title1 {
    width: 230px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding-left: 30px;
    box-sizing: border-box;
    .logo {
      width: 35px;
      margin-right: 20px;
    }
  }
  .r {
    display: flex;
    align-items: center;
    padding-right: 40px;
    box-sizing: border-box;

    .help {
      color: #999999;
      margin-right: 20px;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
  .first_menu {
    flex: 1;
    display: flex;
    .list {
      flex-shrink: 0;
      padding: 0 30px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      &:hover {
        color: $color-primary1;
        cursor: pointer;
      }
    }
    .active {
      color: $color-primary1;
    }
  }
}

.main-con {
  height: 100%;
  .con {
    height: calc(100% - 60px);
    display: flex;
  }
}
.left {
  .el-menu {
    border-right: transparent !important;
    background-color: #001529;
    height: calc(100vh - 60px);
    overflow: auto;

    .el-menu-item {
      height: 55px;
      line-height: 55px;
      color: #cccccc;
      text-align: start;
    }
    &::-webkit-scrollbar {
      width: 0;
    }
    .el-menu-item.is-active {
      color: #2978ff;
    }
    .el-menu-item:hover {
      color: #2978ff;
      i {
        color: #2978ff;
      }
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: #001529;
    }
    .el-menu-item-group__title {
      padding: 0;
    }
    .el-menu-item-group {
      padding-left: 20px;
      box-sizing: border-box;
      background-color: #000c17 !important;
      .el-menu-item {
        background-color: #000c17 !important;
      }
    }
    .el-menu-vertical-demo {
      background-color: #001529;
      color: #cccccc;
      // height: 100vh;
      .menuImg {
        margin-right: 15px;
      }
    }
  }
}
.right {
  flex: 1;
  text-align: start;
  background-color: #f6f6f6;
  height: calc(100vh - 60px);
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  /deep/.el-breadcrumb__inner {
    cursor: pointer !important;
  }
  .right-head {
    height: 50px;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .l {
      display: flex;
      align-items: center;
      span {
        margin-left: 20px;
      }
    }
  }
}
/deep/.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  margin-right: 25px;
  i {
    margin-right: 5px;
  }
}
</style>

<style>
.el-popover {
  text-align: center;
}
.el-popover__reference:hover {
  cursor: pointer;
}
.el-menu {
  background-color: #001529;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
}
.el-menu-item-group__title {
  padding: 0;
}

.el-menu--popup {
  padding: 0;
}
.el-submenu__title {
  color: #cccccc;
  text-align: start;
  padding-left: 40px !important;
  box-sizing: border-box;
}
.el-submenu__title:hover {
  background-color: #001529 !important;
  color: #2978ff;
}
.el-submenu__title:hover i {
  background-color: #001529 !important;
  color: #2978ff;
}
</style>
